import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

import STGCSingletonControl   1.0
import STGCControls           1.0
import QGroundControl.FactSystem 1.0

Item {
    id: root

    property string     icon: ""
    property alias      desc: text.text
    property alias      checked: switchBox.checked
    property bool       _iconExist: icon != ""
    property bool       lineVisible: true
    property Fact       fact: null

    signal clicked

    implicitHeight: ScreenTool.baseSize * 8
    implicitWidth:  ScreenTool.baseSize * 30
//    Layout.preferredHeight: ScreenTool.baseSize * 5
//    Layout.preferredWidth: ScreenTool.baseSize * 30
    Layout.fillWidth: true

    Connections {
        target: fact
        ignoreUnknownSignals: true
        onRawValueChanged:{
            switchBox.checked = fact.value
        }
    }

    Image {
        id: iconImage
        height: parent.height * 0.5
        width:  _iconExist ? height : 0
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: ScreenTool.baseSize * 5
        source: icon
    }

    STGCLabel {
        id: text
        Layout.fillHeight: true
        font.bold: true
        anchors.left: parent.left
        anchors.leftMargin: _iconExist ?  parent.width * 0.1 : ScreenTool.baseSize * 6
        anchors.verticalCenter: parent.verticalCenter
    }

    STGCLabel {
        id: statusText
        Layout.fillHeight: true
        anchors.right: parent.right
        anchors.rightMargin: ScreenTool.baseSize * 2

    }
    STGCSwitch {
        id: switchBox
        height: ScreenTool.baseSize * 4
        width: height * 2
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: parent.width * 0.06
        checked: fact ? fact.value : false
        onToggled: {
            if(fact){
                fact.rawValue = checked
            }
//            console.log("QGroundControl.settingsManager.appSettings.virtualJoystick = ", fact.rawValue)
        }
    }

    Rectangle {
        width: _iconExist ? parent.width * 0.85 : parent.width * 0.9
        height: 1
        visible: lineVisible
        x: _iconExist ?  parent.width * 0.1 : parent.width * 0.05
        color: "white"
        anchors.bottom: parent.bottom
        //anchors.horizontalCenter: parent.horizontalCenter
    }
}
